import type { HomeStatistics } from '@/api/homeApi';

/**
 * 快捷入口项接口
 */
interface QuickAccessItem {
  /** 标题 */
  title: string;
  /** 图标名称 */
  icon?: string;
  /** 点击处理函数 */
  onClick?: () => void;
  /** 路由路径 */
  path?: string;
}

/**
 * 快捷入口和最近访问组件
 * 展示常用功能的快捷入口和用户最近访问的功能
 */
const Recently = ({ data: _data }: { data: HomeStatistics }) => {
  /**
   * 快捷入口配置列表
   */
  const quickAccessList: QuickAccessItem[] = [
    {
      title: '添加产品',
      path: '/product/manager',
    },
    {
      title: '添加设备',
      path: '/device/manager',
    },
    {
      title: '添加项目',
      path: '/project/manager',
    },
    {
      title: '修改设备位置',
      path: '/device/location',
    },
    {
      title: '分组管理',
      path: '/device/group',
    },
    {
      title: '设备日志',
      path: '/device/log',
    },
    {
      title: 'IOC大屏',
      path: '/dashboard/screen',
    },
    {
      title: '新增快捷入口',
      onClick: () => {
        window.$message.info('快捷入口配置功能开发中...');
      },
    },
  ];

  /**
   * 最近访问列表（暂时使用相同配置，后续可从用户行为数据获取）
   */
  const recentAccessList: QuickAccessItem[] = quickAccessList;

  /**
   * 处理快捷入口点击事件
   * @param item 快捷入口项
   */
  const handleItemClick = (item: QuickAccessItem) => {
    if (item.onClick) {
      item.onClick();
    } else if (item.path) {
      // 这里可以使用路由跳转，暂时用消息提示
      window.$message.info(`即将跳转到：${item.title}`);
    } else {
      window.$message.info(`${item.title}功能开发中...`);
    }
  };

  /**
   * 渲染快捷入口项
   * @param item 快捷入口项
   * @param index 索引
   */
  const renderQuickAccessItem = (item: QuickAccessItem, index: number) => (
    <div
      key={`${item.title}-${index}`}
      className="cursor-pointer grid-col-span-1 px-2 py-2.5 flex items-center justify-center bg-#F9FAFC rounded-1 color-#4E5969 hover:(bg-#F0F1F5 color-#0065F2) transition-colors duration-200"
      onClick={() => handleItemClick(item)}
      title={`点击进入${item.title}`}
    >
      <SvgIcon name="icon-home-link" />
      <span className="ml-1 text-sm">{item.title}</span>
    </div>
  );

  return (
    <div className="grid grid-cols-2 gap-6 my-4">
      {/* 快捷入口区域 */}
      <div className="public-card p-6 one grid grid-cols-4 gap-3">
        <div className="mb-1 grid-col-span-4">
          <h3 className="text-lg font-semibold text-gray-800 mb-2">快捷入口</h3>
        </div>
        {quickAccessList.map((item, index) => renderQuickAccessItem(item, index))}
      </div>

      {/* 最近访问区域 */}
      <div className="public-card p-6 one grid grid-cols-4 gap-3">
        <div className="mb-1 grid-col-span-4">
          <h3 className="text-lg font-semibold text-gray-800 mb-2">最近访问</h3>
        </div>
        {recentAccessList.map((item, index) => renderQuickAccessItem(item, index))}
      </div>
    </div>
  );
};

export default Recently;
